import Seat from './seat.js';
const $ = layui.$;
export default class AddCinema {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
            <form  class="layui-form" lay-filter="addForm">
            <div class="layui-form-item">
            <label class="layui-form-label">院线名称</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入院线名称"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="addr"
                required
                lay-verify="required"
                placeholder="请输入地址"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="tel"
                required
                lay-verify="required|phone"
                placeholder="请输入电话"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">官方网址</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="url"
                required
                lay-verify="required|url"
                placeholder="请输入官方网址"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div  class="layui-input-block">
            <button id="addScreenBtn" lay-filter="formDemo" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >增加放映厅</button>
            </div>
            <div id="screensDiv">
                
            </div>
            <button lay-submit id="submitForm1" lay-filter="submitForm1"  style="display:none">提交</button>   
            </form>
        `;
        $("#addCinemaTemplate").html(template);
    }
    handle() {
        let form = layui.form;
        let table = layui.table;
        let upload = layui.upload;
        let layer = layui.layer;
        let index = 0;
        $("#addBtn").click(function () {
            // 弹出增加的窗口
            layer.open({
                type: 1,
                title: "增加院线", //不显示标题栏
                area: ["800px", "400px"],
                shade: 0.6,
                id: "LAY_layuipro", //设定一个id，防止重复弹出
                btn: ["确认", "取消"],
                btnAlign: "c",
                moveType: 1, //拖拽模式，0或者1
                content: $("#addCinemaTemplate").html(),
                yes() {
                    // console.log("yes", form.val("addForm"));
                    $("#submitForm1").click();

                },
                success: function (layero) {
                    // 给增加放映厅按钮添加事件
                    $("#addScreenBtn").click(function () {
                        let screenStr = `
                <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                    <div class="layui-form-item">
                    <label class="layui-form-label">放映厅名</label>
                    <div class="layui-input-block">
                        <input
                        type="text"
                        id="screenName${index}"
                        required
                        lay-verify="required"
                        placeholder="请输入放映厅名"
                        autocomplete="off"
                        class="layui-input"
                        />
                    </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">座位排列</label>
                    <div class="layui-input-block">
                        <input
                        type="text"
                        id="seat${index}"
                        required
                        lay-verify="required|judgearr"
                        placeholder="请输入排列"
                        autocomplete="off"
                        class="layui-input"
                        />
                    </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-input-inline">
                    <button type="button" data-index="${index}" class="layui-btn layui-btn-xs layui-btn-warm layui-btn-radius show-seat-btn">查看</button>
                    <button type="button" data-index="${index}" class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius del-seat-btn">删除</button>
                    </div>
                    </div>
                </div>
                `;
                        //点击序号自增    
                        $("#screensDiv").append(screenStr);
                        index++;
                    });
                    //点击预览
                    $("#screensDiv").on("click", ".show-seat-btn", function () {
                        let index = $(this).attr("data-index");
                        new Seat($("#seat" + index).val());
                    });
                    //点击删除
                    $("#screensDiv").on("click", ".del-seat-btn", function () {
                        let index = $(this).attr("data-index");
                        $("#screenDiv" + index).remove();
                    });
                },
            });

        });
        form.on("submit(submitForm1)", function (data) {
            // console.log(111);
            let screens = [];
            for (let i = 0; i < index; i++) {
                if ($("#screenDiv" + i).length > 0) {
                    screens.push({
                        name: $("#screenName" + i).val(),
                        seat: $("#seat" + i).val()
                    });
                }
            }
            $.ajax({
                type: "post",
                url: "/api/cinemas",
                data: { ...form.val("addForm"), screens: JSON.stringify(screens) },
                success() {
                    table.reload("cinemaTable");
                },
            });
            layer.closeAll();
        });
        form.verify({
            judgearr(value, item) {
                try {
                    let str = JSON.parse(value);
                    // console.log(str, typeof (str));
                    if ((str instanceof Array) && (str.length > 0)) {
                        for (let it of str) {
                            // console.log(it, typeof (it));
                            if (it instanceof Array) {

                            } else {
                                return '排列有误！！'
                            }
                        }
                    } else {
                        return '排列有误！！'
                    }
                } catch (err) {
                    return '排列有误！！'
                }
            }
        });
    }
}